@namespace Skclusive.Markdown.Component
@inherits ThemeComponentBase

.MarkdownSection-Root {
    color: var(--theme-palette-text-primary);
    font-size: 16px;
    word-break: break-word;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.MarkdownSection-Root pre {
    margin: 24px 0;
    padding: 12px 18px;
    overflow: auto;
    direction: ltr;
    border-radius: 4px;
    background-color: var(--theme-custom-content-background-default);
    -webkit-overflow-scrolling: touch;
}

.MarkdownSection-Root code {
    color: var(--theme-palette-text-primary);
    display: inline-block;
    padding: 2px 6px;
    font-size: 14px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    border-radius: 2px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.MarkdownSection-Root p code,
.MarkdownSection-Root ul code,
.MarkdownSection-Root pre code {
    font-size: 14px;
}

.MarkdownSection-Root .token.operator {
    background: transparent;
}

.MarkdownSection-Root .description {
    margin: 0 0 40px;
    font-size: 1.5rem;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0em;
    margin-bottom: 20px;
}

.MarkdownSection-Root p,
.MarkdownSection-Root ul,
.MarkdownSection-Root ol {
    margin-top: 0;
    line-height: 1.6;
    margin-bottom: 16px;
}

.MarkdownSection-Root ul {
    padding-left: 30px;
}

.MarkdownSection-Root table {
    width: 100%;
    display: block;
    overflow: hidden;
    overflow-x: auto;
    word-break: normal;
    margin-bottom: 16px;
    border-spacing: 0;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
}

.MarkdownSection-Root td {
    color: var(--theme-palette-text-primary);
    padding: 16px;
    font-size: 0.875rem;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid var(--theme-palette-divider);
    letter-spacing: 0.01071em;
}

.MarkdownSection-Root td code {
    font-size: 13px;
    line-height: 1.6;
}

.MarkdownSection-Root th {
    color: var(--theme-palette-text-primary);
    padding: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5rem;
    white-space: pre;
    border-bottom: 1px solid var(--theme-palette-divider);
}

.MarkdownSection-Root blockquote {
    margin: 24px 0;
    padding: 4px 24px;
    border-left: 5px solid #ffe564;
    background-color: rgba(255, 229, 100, 0.2);
}

.MarkdownSection-Root a,
.MarkdownSection-Root a code {
    color: var(--theme-palette-secondary-main);
    text-decoration: none;
}

.MarkdownSection-Root img {
    max-width: 100%;
}

.MarkdownSection-Root hr {
    border: none;
    height: 1px;
    margin: 48px 0px;
    flex-shrink: 0;
    background-color: var(--theme-palette-divider);
}

.MarkdownSection-Root a:hover,
.MarkdownSection-Root a code:hover {
    text-decoration: underline;
}

.MarkdownSection-Root blockquote p {
    margin-top: 16px;
}

.MarkdownSection-Root table .prop-name {
    font-size: 13px;
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
}

.MarkdownSection-Root table .required {
}

.MarkdownSection-Root table .prop-type {
    font-size: 13px;
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
}

.MarkdownSection-Root table .prop-default {
    font-size: 13px;
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    border-bottom: 1px dotted var(--theme-palette-text-hint);
}

.MarkdownSection-Root h1 code,
.MarkdownSection-Root h2 code,
.MarkdownSection-Root h3 code,
.MarkdownSection-Root h4 code {
    font-size: inherit;
    word-break: break-all;
    line-height: inherit;
}

@if (IsAuto || IsLight) {
    @if (IsAuto) {
        @MediaSchemeLight @OpenCurly
    }
    @* .MarkdownSection-Root code {
        background-color: rgba(255, 229, 100, 0.1);
    } *@
    @LightStyle
    @if (IsAuto) {
        @CloseCurly
    }
}

@if (IsAuto || IsDark) {
    @if (IsAuto) {
        @MediaSchemeDark @OpenCurly
    }
    @DarkStyle
    @if (IsAuto) {
        @CloseCurly
    }
}

@code
{
    private static readonly string LightStyle = @"
        .MarkdownSection-Root table .required {
            color: #006500;
        }

        .MarkdownSection-Root table .prop-type {
            color: #932981;
        }
    ";

    private static readonly string DarkStyle = @"
        .MarkdownSection-Root code {
            background-color: rgba(255, 229, 100, 0.2);
        }

        .MarkdownSection-Root table .required {
            color: #a5ffa5;
        }

        .MarkdownSection-Root table .prop-type {
            color: #ffb6ec;
        }

        .MarkdownSection-Root code[class*=""language-""] {
            color: #fff;
            background-color: #333;
        }
    ";
}